<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title></title>
	</head>
	<style>
		* {
			box-sizing: border-box;
		}

		body {
			background-image: url("images/bg2.png");
			background-size: cover;
			font-size: 16px;
			margin: 0;
			padding: 0;
		}

		.center-box {
			background-color: white;
			border-radius: 15px;
			padding: 15px;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 300px;
			height: 200px;
			box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.btn {
			width: 70%;
			background-color: #061113;
			padding: 5px 10px;
			color: white;
			border-radius: 5px;
			margin-top: 30px;
		}

		input {
			padding: 4px 8px;
			border-radius: 4px;
			border: 1px solid #b9b9b9;
		}

		select {
			width: 70%;
			padding: 5px;
			border: 1px solid #767676;
		}

		/* Toast 样式 */
		.toast {
			position: fixed;
			bottom: 50px;
			left: 50%;
			font-size: 14px;
			transform: translateX(-50%);
			background-color: #333;
			color: #fff;
			padding: 10px 20px;
			border-radius: 5px;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
		}

		/* 显示 Toast 的动画 */
		.toast-show {
			opacity: 1;
			visibility: visible;
		}
	</style>
	<body>
		<div id="app" class="center-box">
			<select id="chanle" v-model="chanle">
				<option value="" disabled selected hidden>请选择CHANLE</option>
				<option :value="item.channel_name" v-for="(item,index) in chanleList">{{item.channel_name}}</option>
			</select>
			<select id="rooms" v-model="room" style="margin-top: 10px;" @change="onSelectRoom">
				<option value="" disabled selected hidden>请选择ROOM</option>
				<option :value="item.room_name" v-for="(item,index) in roomList">{{item.room_name}}</option>
			</select>
			<button class="btn" @click="login">LOGIN</button>
			<!-- Toast 元素 -->
			<div id="toast" class="toast"></div>
		</div>

		<script>
			// 创建 Vue 实例
			var app = new Vue({
				el: '#app', // 将 Vue 实例挂载到根元素
				data: {
					chanle: "",
					room: "",
					liveId:"",
					originChanleList: []
				},
				computed:{
					roomList(){
						return this.originChanleList.filter((item) => {
							return item.channel_name == this.chanle
						})
					},
					chanleList(){
						// 使用 filter 方法去除 id 相同的对象
						return this.originChanleList.filter((obj, index, self) =>
						  index === self.findIndex((o) => o.channel_name === obj.channel_name)
						);
					}
				},
				mounted() {
					axios.get(`http://104.194.73.144/index/api/get_data`)
						.then((response) => {
							// 请求成功处理  
							console.log(response.data);
							this.originChanleList = response.data.data;
						})
						.catch(function(error) {
							// 请求失败处理  
							console.error(error);
						});
				},
				methods: {
					onSelectRoom(e){
						console.log('e: ',e);
					},
					login() {
						console.log('this.chanle: ', this.chanle);
						console.log('this.room: ', this.room);
						if (!this.room) {
							this.showToast("请选择ROOM")
							return
						}
						let roomId = ""
						this.roomList.forEach(item => {
							if(item.room_name == this.room){
								roomId = item.room_id;
							}
						})
						window.location.href = `./live.html?roomId=${roomId}&autostart=true`;
						
						/* axios.get(`http://104.194.73.144/index/api/get_liveid?channel=${this.chanle}&room=${this.room}`)
							.then((response) => {
								// 请求成功处理  
								console.log(response.data);
								window.location.href = `./live.html?live_user_id=${response.data.data.live_user_id}&liveId=${response.data.data.live_id}&roomName=${this.room}&look_user_id=${response.data.data.look_user_id}`;
							})
							.catch(function(error) {
								// 请求失败处理  
								console.error(error);
							}); */
					},
					showToast(content) {
						// 获取 Toast 元素
						const toast = document.getElementById('toast');
						// 设置 Toast 内容
						toast.innerHTML = content;
						// 显示 Toast 元素
						toast.classList.add('toast-show');
						// 3 秒后隐藏 Toast 元素
						setTimeout(() => {
							toast.classList.remove('toast-show');
						}, 3000);
					}

				}
			});
		</script>
	</body>
</html>